<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/main.css">
    <style type="text/css">
        .noteHeaderImg {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            border-radius: 50%;
        }

        .friendList {
            overflow-y: auto;
            height: 100%;
        }
    </style>
</head>

<body>
<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="me.html" id="appUserName"></a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="dashboard.html">恩爱广场<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item layui-this">
        <a href="friends.html">好友列表</a>
    </li>
    <li class="layui-nav-item">
        <a href="our.html">我俩专属</a>
    </li>
    <li class="layui-nav-item">
        <a href="write.html">说点什么</a>
    </li>
    <li class="layui-nav-item">
        <a href="game.html">玩玩小游戏</a>
    </li>
</ul>
<br>
<div class="layui-container">
    <blockquote class="layui-elem-quote">我的好友们</blockquote>
    <div class="layui-row layui-col-space15" style="height: 800px;">
        <div class="layui-col-md3" style="height: 100%;">
            <div class="layui-panel" style="height: 100%;" id="friendLists">
                <ul class="layui-menu" id="friendList" style="overflow-y:auto ; height: 100%;">

                </ul>
            </div>
        </div>
        <div class="layui-col-md9" style="height: 100%;">
            <div id="view" style="height: 100%;">
                <div class="layui-panel">
                    <div style="padding: 30px;">找个人聊天吧</div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>
<script src="layui/init.js"></script>
<script>
    layui.use(function () {
        var dropdown = layui.dropdown;
        var layer = layui.layer
        var laytpl = layui.laytpl;
        var $ = layui.$
        var ul = document.getElementById("friendList")

        $.ajax({
            type: "GET",
            url: "/note/user/list?accountId=" + localStorage.getItem('userId'),
            headers: {
                token: localStorage.getItem('userToken')
            },
            success: function (data) {
                console.log(data)
                for (let index = 0; index < data.length; index++) {
                    var str = JSON.stringify(data[index])
                    var strObj = JSON.parse(str)
                    console.log(strObj)
                    var li = document.createElement('li')
                    var div = document.createElement('div')
                    li.setAttribute("lay-options", strObj.accountId)
                    div.className = "layui-menu-body-title"
                    div.innerHTML =
                        '<a href="#" style="padding: 10px;"><img src="/layui/headImg.jpeg" class="noteHeaderImg">' +
                        strObj.userName + '</a>'
                    ul.appendChild(li)
                    li.appendChild(div)
                }
                localStorage.setItem('friendList',JSON.stringify(data))
                bindDropDown();
            },
            error: function (data) {
                console.log(data)
                layer.msg(JSON.stringify(data))
                window.location.replace("http://localhost/login.html");
            }
        });

        function bindDropDown() {
            dropdown.on('click(friendList)', function (options) {
                var othis = $(this); //当前菜单列表的 DOM 对象
                layer.msg(JSON.stringify(options))
                console.log(options); //菜单列表的 lay-options 中的参数
                // 发起请求，请求聊天记录
                $.ajax({
                    type: "GET",
                    url: "/note/chat/msg?id=" + options,
                    headers: {
                        token: localStorage.getItem('userToken')
                    },
                    success: function (data) {
                        console.log(data)

                        dataMsg = { //数据
                            "title": JSON.stringify(options),
                            "msg": data
                        }
                        var getTpl = chatView.innerHTML,
                            view = document.getElementById('view');
                        laytpl(getTpl).render(dataMsg, function (html) {
                            view.innerHTML = html;
                        });
                    },
                    error: function (data) {
                        console.log(data)
                    }
                });
            });
        }
    });
</script>
<script id="chatView" type="text/html">
    <div class="layui-panel" style="height: 10%; text-align: center;">
        <a href="#"><img src="/layui/headImg.jpeg"
                         class="noteHeaderImg">{{d.title}}</a>
    </div>
    <div class="layui-panel" style="height: 80%;">
        <div style="padding: 30px; height: 100%;">{{d.msg}}</div>
    </div>
    <div class="layui-panel" style="height: 10%;">
        <input type="text" class="layui-input" placeholder="输入" style="height: 100%;">
    </div>
</script>
</body>

</html>